<template>
    <div class="pusettings">
        <div>开启推送 <el-switch v-model="switchgear" /></div>
        <div class="pushtime"><span class="pushtime_lg"></span><span>推送时间</span></div>
        <div>
            <div class="workdays">
                <span> <el-checkbox v-model="checked1" size="large" :disabled="!switchgear">只在工作日推送</el-checkbox></span>
                <div class="workdays_color">{{ dynamicTags.length }}<span>/10</span></div>
            </div>
            <div class="workdays_time">
                <el-tag v-for="tag in dynamicTags" :key="tag" style="margin-right: 15px;" class="mx-1" closable
                    :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
                <el-time-select v-if="inputVisible" ref="InputRef" style="width: 200px;" v-model="inputValue" start="08:00"
                    step="01:00" end="24:00" placeholder="选择推送的时间" @keyup.enter="handleInputConfirm"
                    @blur="handleInputConfirm" />
                <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput" :disabled="!checked1">
                    + 添加时间
                </el-button>
            </div>
        </div>

        <div style="margin-top: 50px;">
            <div class="pushtime"><span class="pushtime_lg"></span><span>推送方式</span></div>
            <div class="pushemail">
                <span> <el-checkbox v-model="email" size="large" :disabled="!switchgear">邮件推送</el-checkbox></span>
                <div>
                    <div class="pushemailBox" v-for="(item, index) in emailList" :key="index">
                        <span class="pushemailBox_one">
                            <el-input style="width: 150px;" v-model="item.name" placeholder="请输入邮件" />
                        </span>
                        <span class="pushemailBox_two">
                            <img v-if="item.id == 1" style="width: 36px; height: 36px;" src="@/assets/img/mypoints/jia.png"
                                alt="" @click="emailClick(item.id)">
                            <img v-if="item.id != 1" style="width: 36px; height: 36px;" src="@/assets/img/mypoints/jian.png"
                                alt="" @click="emailClick_qx(item.id)">
                        </span>
                    </div>
                </div>
            </div>
            <div class="pushemail">
                <span> <el-checkbox v-model="duanxin" size="large" :disabled="!switchgear">短信推送</el-checkbox></span>
                <div>
                    <div class="pushemailBox" v-for="(item, index) in duanxinList" :key="index">
                        <span class="pushemailBox_one">
                            <el-input style="width: 150px;" v-model="item.name" placeholder="请输入邮件" />
                        </span>
                        <span class="pushemailBox_two">
                            <img v-if="item.id == 1" style="width: 36px; height: 36px;" src="@/assets/img/mypoints/jia.png"
                                alt="" @click="daunxinClick(item.id)">
                            <img v-if="item.id != 1" style="width: 36px; height: 36px;" src="@/assets/img/mypoints/jian.png"
                                alt="" @click="daunxinClick_qx(item.id)">
                        </span>
                    </div>
                </div>
            </div>
            <div style="width: 500px; text-align: center; margin-top: 80px;">
                <el-button type="primary" @click="submissions" :disabled="!switchgear">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
let switchgear = ref(false)
let checked1 = ref(false)
let email = ref(false)
let duanxin = ref(false)
const inputValue = ref('')
const dynamicTags = ref(['13:00', '14:00', '15:00'])
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = (tag) => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value!.input!.focus()
    })
}

const handleInputConfirm = () => {
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}


let emailList = ref([
    {
        id: 1,
        name: ''
    },

])

const emailClick = (id) => {
    if (email.value) {
        emailList.value.push(
            {
                id: id + 1,
                name: ''
            },
        )
    }
}
const emailClick_qx = (id) => {
    if (id != 1) {
        emailList.value = emailList.value.slice(0, 1).concat(emailList.value.slice(2));
    }
}

let duanxinList = ref([
    {
        id: 1,
        name: '',
    },
])

const daunxinClick = (id) => {
    if (duanxin.value) {
        duanxinList.value.push(
            {
                id: id + 1,
                name: ''
            },
        )
    }
}

const daunxinClick_qx = (id) => {
    if (id != 1) {
        duanxinList.value = duanxinList.value.slice(0, 1).concat(duanxinList.value.slice(2));
    }
}

const submissions = () => {
    let arrSubmis = { ...emailList.value, ...duanxinList.value }
}
</script>

<style lang="scss" scoped>
.pushtime_lg {
    width: 3px;
    height: 18px;
    border-radius: 2px;
    margin-right: 15px;
    background-color: #6675FF;

}

.pushemail {
    display: flex;
    justify-content: space-between;
    width: 500px;
    margin-top: 30px;

    .pushemailBox {
        display: flex;
        align-items: center;
        margin-top: 15px;

        .pushemailBox_two {
            margin-left: 15px;
        }
    }
}

.pusettings {
    height: 940px;
    padding: 20px;
    background-color: #fff;

    .pushtime {
        display: flex;
        height: 40px;
        margin-top: 15px;
        border-bottom: 1px solid #EEEEEE;
    }

    .workdays {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 300px;

        .workdays_color {
            color: #6675FF;
        }
    }

    .workdays_time {
        margin-top: 15px;
    }
}

::v-deep {
    .el-checkbox.el-checkbox--large .el-checkbox__inner {
        width: 15px;
        height: 15px;
    }

    .el-checkbox.el-checkbox--large .el-checkbox__label {
        margin-left: 5px;
        font-size: 15px;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #000;
    }
}
</style>  